<!--
 * @Description:
 * @Author: dh
 * @Date: 2022-01-21 13:41:19
 * @LastEditors: dh
 * @LastEditTime: 2022-11-28 14:53:33
-->
<template>
	<p>source：{{ source.name }} <button @click="changeSource">修改source</button></p>
	<p>refVal：{{ refVal }} <button @click="changeRefVal">修改refVal</button></p>
	<p>toRefVal：{{ toRefVal }} <button @click="changeToRefVal">修改toRefVal</button></p>
	<p>num：{{ num }}</p>
</template>

<script>
import { ref, toRef, toRaw, defineComponent, reactive } from 'vue';
/*
  0.ref
  原始数据修改不会影响创建后的；但是有响应数据变化就会影响创建后的数据
  参数为引用类型，创建后的数据修改会影响原始数据,
  参数为基本类型，创建后的数据修改不会影响原始数据
  创建后的数据改变，会响应页面

  1.toRef
  创建一个ref类型数据, 并和以前的数据关联,
  原数据可响应，创建后的数据就可响应,否则不响应，但是有响应数据改变后，就可响应

  2.toRefs
  批量创建ref类型数据, 并和以前数据关联,toRef的批量版
*
*/
export default defineComponent({
	name: 'App',
	setup() {
		const source = { name: '小红' };
		function changeSource() {
			source.name = '小绿';
			console.log(source.name);
		}

		// TODO： ref
		const refVal = ref(source.name);
		function changeRefVal() {
			refVal.value = '小黑';
			console.log('source', source); // {name:'小红'}
			console.log('refVal', refVal); // {name:'小黑'}
		}

		// TODO： toRef
		// 这里源数据是非响应数据，创建后的数据能响应是应为有ref数据 num 在变化
		const toRefVal = toRef(source, 'name');
		function changeToRefVal() {
			toRefVal.value = '小绿';
			console.log('source', source); // {name:'小绿'}
			console.log('toRefVal', toRefVal); // {name:'小绿'}
		}
		// TODO toRaw 将响应式对象转普通对象
		const u = ref({ a: 1 });
		const l = toRaw(u);
		console.log(l);

		//
		const num = reactive({ value: 0 });
		setInterval(() => {
			num.value += 1;
		}, 1000);

		return { source, num, refVal, toRefVal, changeRefVal, changeToRefVal, changeSource };
	},
});
</script>
